<template>
    <div class="app">
        <header class="mui-bar mui-bar-nav">
            <a @click.prevent="backPge" class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
            <h1 class="mui-title">小黄狗</h1>
        </header>
        <transition mode="out-in">
            <router-view></router-view>
        </transition>
        <nav class="mui-bar mui-bar-tab">
            <router-link class="mui-tab-item" to="/home">
                <span class="mui-icon mui-icon-home"></span>
                <span class="mui-tab-label">首页</span>
            </router-link>
            <router-link class="mui-tab-item" to="/search">
                <span class="mui-icon mui-icon-search"></span>
                <span class="mui-tab-label">搜索</span>
            </router-link>
            <router-link class="mui-tab-item" to="/shop">
                <span class="mui-icon mui-icon-starhalf">
                    <span class="mui-badge">0</span>
                </span>
                <span class="mui-tab-label">购物车</span>
            </router-link>
            <router-link class="mui-tab-item" to="/user">
                <span class="mui-icon mui-icon-contact mui-icon-icon-contact-filled"></span>
                <span class="mui-tab-label">个人中心</span>
            </router-link>
        </nav>
    </div>
</template>
<script>
    import {Toast} from 'mint-ui'
    export  default {
        data(){
            return{
                infoToast:null
            }
        },
        methods:{
            show(){
                this.infoToast = Toast({
                    position: 'middle',
                    duration: -1,
                    className:"mui-spinner"
                })
            },
            backPge(){
                window.history.go(-1);
            }
        },
        created(){
            /*this.show();
            setTimeout(()=>{
                this.infoToast.close();
            },3000)*/
        }
    }

</script>
<style scoped>
    .mui-bar-nav{
        height: 100px;
        background-color: deepskyblue;
    }
    .mui-title{
        height: 100px;
        line-height: 100px;
        font-size: 50px;
    }
    .mui-bar-tab{
        height: 150px;
    }
    .mui-icon{
        font-size: 90px;
        text-align: center;
    }
    .mui-tab-label{
        width: 300px;
        line-height: 60px;
        text-align: center;
        font-size: 40px !important;
    }
    .mui-badge{
        width: 40px;
        height: 40px;
        font-size: 30px;
        position: absolute;
        left: 70px;
    }

    a{
        text-decoration: none;
    }
    .app{
         padding: 100px 0;
    }
    .v-enter{
        opacity: 0;
        transform: translateX(100%);
    }
    .v-leave-to{
        opacity: 0;
        transform: translateX(-100%);
    }
    .v-enter-active,.v-leave-active{
        transition: all 0.2s;
        position: absolute;
    }
</style>